<template>
  <div>
    <div>
      <el-button type="primary" style="margin: 10px 10px" @click="showaddView"
        >预订房间</el-button
      >
      <el-input
        style="width: 300px"
        placeholder="请输入预订人姓名查找"
        suffix-icon="el-icon-search"
        v-model="queryParams.cusName"
      >
      </el-input>
      <el-button type="primary" style="margin: 10px 10px" @click="handlesearch"
        >查找</el-button
      >
      <el-table
        ref="singleTable"
        :data="reservationData"
        stripe
        height="400"
        border
        style="width: 90%"
        v-loading="loading"
        highlight-current-row
        @current-change="handleClickChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="bookId" label="预订ID" width="70" fixed>
        </el-table-column>
        <el-table-column prop="cusName" label="预订人" width="100">
        </el-table-column>
        <el-table-column prop="cusTel" label="联系方式" width="150">
        </el-table-column>
        <el-table-column prop="cusIdcard" label="身份证" width="100">
        </el-table-column>
        <el-table-column
          prop="roomType.roomTypeName"
          label="房型名称"
          width="130"
        >
        </el-table-column>
        <el-table-column prop="bookNum" label="预订数量" width="80">
        </el-table-column>
        <el-table-column prop="checkinDate" label="预订入住时间" width="200">
        </el-table-column>
        <el-table-column prop="checkoutDate" label="预订退房时间" width="200">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="200">
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleCheckIn(scope.row)"
              width="150"
              >办理入住</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 设置分页开始 -->
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 设置分页结束 -->
    </div>

    <el-dialog title="添加预订" :visible.sync="dialogaddVisible" width="60%">
      <div>
        <el-tag style="margin: 0px 10px 20px 20px">预订人姓名</el-tag>
        <el-input v-model="addform.cusName" style="width: 130px"></el-input>
        <el-tag style="margin: 0px 10px 20px 20px">联系方式</el-tag>
        <el-input v-model="addform.cusTel" style="width: 200px"></el-input>
        <el-tag style="margin-left: 10px;margin-right:10px">预订数量</el-tag>
        <el-input v-model="addform.bookNum" style="width: 100px"></el-input>
        <br />
        <el-tag style="margin: 0px 10px 20px 20px">身份证</el-tag>
        <el-input v-model="addform.cusIdcard" style="width: 100px"></el-input>
        <el-tag style="margin-right: 10px;margin-left: 10px">预订房型</el-tag>
        <el-select
          v-model="addform.roomTypeId"
          placeholder="请选择房型"
          width="200px"
        >
          <el-option
            v-for="item in roomtypeOptions"
            :key="item.roomTypeId"
            :label="item.roomTypeName"
            :value="item.roomTypeId"
          />
        </el-select>
        <el-tag style="margin: 0px 10px 20px 20px">备注</el-tag>
        <el-input v-model="addform.remark" style="width: 160px"></el-input>
        <br />
        <el-tag style="margin: 0px 10px 20px 20px">预计入住时间</el-tag>
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="addform.checkinDate"
          type="datetime"
          placeholder="预计入住日期"
          style="width: 240px"
        >
        </el-date-picker>
        <el-tag style="margin: 0px 10px 20px 20px">预计退房时间</el-tag>
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="addform.checkoutDate"
          type="datetime"
          placeholder="预计退房日期"
          style="width: 240px"
        >
        </el-date-picker>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogaddVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addOnereservation"
          @keydown.enter.native="addOnereservation"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listReservation,
  addReservation,
  searchReservation,
  autoAddCusInfo
} from "@/api/reservation";
import { listRoomtype } from "../api/roomtype";
export default {
  name: "Roomtype",
  data() {
    return {
      currentRow: null,
      // 遮罩层
      loading: false,
      // 类型表格数据
      reservationData: [],
      roomtypeOptions: undefined,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 总条数
      total: 0,
      // 当前页
      pageNum: 0,
      // 每页数据量
      pageSize: 0,
      // 查询参数
      queryParams: {
        bookNum: null,
        cusTel: null,
        cusName: null,
        roomTypeId: null,
        bookId: null,
        checkinDate: null,
        checkoutDate: null,
        remark: null,
        pageNum: 1,
        pageSize: 5
      },
      // 添加表单参数
      form: {},
      //修改参数
      addform: {
        cusName: undefined,
        cusTel: undefined,
        checkinDate: undefined,
        checkoutDate: undefined,
        roomTypeId: undefined,
        remark: undefined,
        cusIdcard: undefined
      },
      //预定信息传去入住
      reserveCheckin: {
        roomTypeId: undefined,
        cusName: undefined,
        cusTel: undefined,
        remark: undefined,
        cusIdcard: undefined
      },
      dialogeditVisible: false,
      dialogaddVisible: false
    };
  },
  mounted() {
    this.initreservationData();
    listRoomtype()
      .then(response => {
        this.roomtypeOptions = response.data.data;
      })
      .catch(error => {
        // 错误分为 status-请求错误 和 code-账号密码错误
        this.$message.error(error);
        console.log(error);
      });
  },
  methods: {
    //重置表格
    resetform() {
      this.addform = {
        cusName: undefined,
        cusTel: undefined,
        checkinDate: undefined,
        checkoutDate: undefined,
        roomTypeId: undefined,
        remark: undefined
      };
    },
    //添加房型
    showaddView() {
      this.dialogaddVisible = true;
      this.resetform();
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.initreservationData();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.initreservationData();
    },
    //添加预订
    addOnereservation() {
      if (
        typeof this.addform.roomTypeId === "undefined" ||
        typeof this.addform.cusName === "undefined" ||
        typeof this.addform.cusTel === "undefined" ||
        typeof this.addform.checkinDate === "undefined" ||
        typeof this.addform.checkoutDate === "undefined" ||
        typeof this.addform.cusIdcard === "undefined"
      ) {
        console.log(this.editform);
        console.log(this.resp);
        this.$message.error("请输入完整房型信息！");
      } else {
        addReservation(this.addform)
          .then(resp => {
            if (resp) {
              this.initreservationData();
              console.log(resp.data);
              if (resp.data.code == "200") {
                this.$message.success(resp.data);
                this.resetform();
              } else {
                this.$message.error(resp.data);
              }
            }
            this.dialogaddVisible = false;
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          });
      }
    },
    handleCheckIn(row) {
      //新增
      this.reserveCheckin.bookId = row.bookId;
      this.reserveCheckin.roomTypeId = row.roomTypeId;
      this.reserveCheckin.cusTel = row.cusTel;
      this.reserveCheckin.cusName = row.cusName;
      this.reserveCheckin.remark = row.remark;
      this.reserveCheckin.cusIdcard = row.cusIdcard;
      console.log(this.reserveCheckin);
      autoAddCusInfo(this.reserveCheckin)
        .then(resp => {
          if (resp) {
            if (resp.data.code == "200") {
              //跳转页面
              this.$router.push("/RoomState");
              this.$message.success(resp.data);
            } else {
              this.$message.error(resp.data);
            }
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
    },
    //查询预订
    handlesearch() {
      if (this.queryParams.cusName != null) {
        searchReservation(this.queryParams.cusName).then(resp => {
          if (resp.data) {
            this.$message({
              type: "success",
              message: "查询成功!"
            });
            console.log(resp.data);
          } else {
            this.$message({
              type: "info",
              message: "该预订人不存在!"
            });
          }
        });
      } else {
        this.$message({
          type: "success",
          message: "预订列表已刷新!"
        });
      }
      this.initreservationData();
    },
    //预订列表数据
    initreservationData() {
      this.loading = true;
      listReservation(this.queryParams).then(resp => {
        console.log(resp.data);
        if (resp) {
          this.reservationData = resp.data.data.list; //api读取数据
          this.total = resp.data.data.total;
          this.pageNum = resp.data.data.pageNum;
          this.pageSize = resp.data.data.pageSize;
        }
        this.loading = false;
      });
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleClickChange(val) {
      this.currentRow = val;
    }
  }
};
</script>

<style></style>
